<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"
    />
    <title>ToDoList—最简单的待办事项列表</title>
    <link rel="stylesheet" href="css/index.css" />
    <!-- <script src="./js/todolist1.js"></script> -->
  </head>

  <body>
    <header>
      <section>
        <label for="title">ToDoList</label>
        <input
          type="text"
          id="title"
          name="title"
          placeholder="添加ToDo"
          required="required"
          autocomplete="off"
        />
      </section>
    </header>
    <section>
      <h2>正在进行/待办 <span id="todocount"></span></h2>
      <ol id="todolist" class="demo-box">
        <!-- <li><input type='checkbox' > <p>测试</p> <a href='javascript:;'></a></li> -->
      </ol>
      <h2>已经完成 <span id="donecount"></span></h2>
      <ul id="donelist"></ul>
    </section>
    <footer>Copyright &copy; 2014 todolist.cn</footer>

    <script>
      let data = localStorage.getItem('todolist') // 取出存储的数据
      const arr = data ? JSON.parse(data) : []
      const title = document.querySelector('#title')
      const donelist = document.querySelector('#donelist')
      const todolist = document.querySelector('#todolist')
      const todocount = document.querySelector('#todocount')
      const donecount = document.querySelector('#donecount')
      title.addEventListener('keydown', function (e) {
        // 判断是否是回车
        if (e.key == 'Enter') {
          // console.log('回车')
          if (title.value == '') {
            alert('亲亲，请输入内容哦~')
            return
          }
          const obj = {
            title: title.value, // 代办事项的标题
            done: false, // 表示未完成
          }
          arr.push(obj)
          localStorage.setItem('todolist', JSON.stringify(arr))
          title.value = ''
          render()
        }
      })
      render()
      function render() {
        let todoCount = 0 // 未完成的个数
        let doneCount = 0 // 已完成的个数
        todolist.innerHTML = ''
        donelist.innerHTML = ''
        for (let i = 0; i < arr.length; i++) {
          const li = document.createElement('li')
          li.innerHTML = `<input type='checkbox' data-index='${i}'> <p>${arr[i].title}</p> 
                                <a href='javascript:;'></a>`
          if (arr[i].done) {
            doneCount++
            donelist.insertBefore(li, donelist.children[0])
            li.querySelector('input').checked = true
          } else {
            todoCount++
            todolist.insertBefore(li, todolist.children[0])
          }
        }
        donecount.innerHTML = doneCount
        todocount.innerHTML = todoCount
      }

      function trans(e) {
        if (e.target.tagName == 'INPUT') {
          const checked = e.target.checked
          const index = e.target.dataset.index
          arr[index].done = checked
          localStorage.setItem('todolist', JSON.stringify(arr))
          render()
        }
      }
      todolist.addEventListener('click', trans)
      donelist.addEventListener('click', trans)

      function delObj(e) {
        if (e.target.tagName == 'A') {
          const index =
            +e.target.parentNode.querySelector('input').dataset.index
          arr.splice(index, 1)
          localStorage.setItem('todolist', JSON.stringify(arr))
          render()
        }
      }
      todolist.addEventListener('click', delObj)
      donelist.addEventListener('click', delObj)
    </script>
  </body>
</html>
